package com.base.myproject.client.ui;

import com.base.myproject.client.busi.BaseStore;
import com.base.myproject.client.system.Env;
import com.extjs.gxt.ui.client.data.BaseModelData;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.util.KeyNav;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.ListView;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
/**
 * 显示图片的类，通过listview方式显示，显示的格式通过getTemplate设置
 * 和@see BaseGrid 一样，删除的快捷方式是CTR+D
 * 图片的删除在界面上的“上传”按钮，传输图片到服务器处理。
 * @author zgw
 *2009-6-18 下午11:14:36
 * javazgw@gmail.com
 */
public class BaseImageList extends ContentPanel{
	 BaseStore<BaseModelData> imagestore = null;
	 BaseStore<BaseModelData> parentstore = null;
	 BaseImageList blthis = null;
	 
	  ListView<BaseModelData> view = null;
	 
	 String param = null;
	 boolean canbeupload = true;
	 public BaseImageList(BaseStore<BaseModelData> imagestore,BaseStore<BaseModelData> parentstore,boolean canbeupload )
	{
		this.imagestore = imagestore;
		this.parentstore = parentstore;
		this.canbeupload = canbeupload;
		init();
		blthis = this;
		
	}
	 public BaseImageList(BaseStore<BaseModelData> imagestore,BaseStore<BaseModelData> parentstore )
		{
		 this(imagestore,parentstore,true);
		}
	
	public String getParam() {
		return param;
	}

	public void setParam(String param) {
		this.param = param;
	}

	public void init()
	{
		if(canbeupload)
		{
		 ToolBar toolBar = new ToolBar(); 
		   toolBar.setHeight("10%");
		   Button b = new Button("增加新图片");
		   toolBar.add(b);
		   b.addSelectionListener(new SelectionListener<ButtonEvent>() 
		   {

			@Override
			public void componentSelected(ButtonEvent ce) {
				
				blthis.setParam("table=b2cgcodeimage&key=b2cgcode&keyvalue="+parentstore.getValue("b2cgcode")+"&idx=idx&system_uuid="+Env.getUid());
				BaseImageDialog bid = new BaseImageDialog(getParam());
				bid.show();
			}
			   
		   });
		   this.setTopComponent(toolBar);
		}
		//setWidth(535);  
		view = new ListView<BaseModelData>();
	    view.setAutoHeight(true);  
	    //view.setWidth(535);  
//	    ListViewSelectionModel<BaseModelData> lvsm =  new ListViewSelectionModel<BaseModelData>();
//	    lvsm.setSelectionMode(SelectionMode.MULTI);
//	    view.setSelectionModel(lvsm);
//	    CheckColumnConfig ccc = new CheckColumnConfig();
//	    view.addPlugin(ccc);
	    
	    view.setTemplate(getTemplate());  
	   view.setStore(imagestore);  
	   view.setBorders(false);
	    view.setItemSelector("div.thumb-wrap");  
	    KeyNav kn = new KeyNav(view)
	    {
	    	public void onKeyPress(ComponentEvent ce) {
	    		 if(ce.isControlKey() && ce.getKeyCode()==68) 
	    		 {
	    		
	    			imagestore.remove((BaseModelData)view.getSelectionModel().getSelectedItem());
	    		 }
	    	}
	    };
	    setCollapsible(true);  
	    //setBodyBorder(false);
	    this.add(view);
	   
	    setHeaderVisible(false);
	}
	
	 public ListView<BaseModelData> getView() {
		return view;
	}
	public void setView(ListView<BaseModelData> view) {
		this.view = view;
	}
	protected native String getTemplate() /*-{ 
	    var o =  ['<ul style="list-style:none;width:500px"> ','<tpl for=".">', 
	    '<div class="thumb-wrap" id="{name}" style="border: 1px solid white" >', 
	    '<div class="thumb" ><img  style="float:left;display:block;overflow:hidden;width:120px;height:120px;border:3px double #eee;margin: 0 2px 2px 0" src="http://www.google.cn/intl/zh-CN/images/logos/translate_logo.gif" title="{name}"></div>', 
	    '<span class="x-editable">{shortName}</span></div>', 
	    '</tpl>', '</ul>',
	    '<div class="x-clear"></div>'].join(""); 
	  
	  var z = ['<ul style="list-style:none;width:500px"> ','<tpl for=".">',
	    '<div class="thumb-wrap" id="{name}" style="border: 1px solid white" >',
	   
	  '<div class="thumb" ><li style="float:left;display:block;overflow:hidden;width:120px;height:120px;border:3px double #eee;margin: 0 2px 2px 0"><img src="http://www.google.cn/intl/zh-CN/images/logos/translate_logo.gif" alt="" /></li></div>' ,

	  '<span class="x-editable">{shortName}</span></div>',
	  '</tpl>',
	  '</ul> ' ,'<div class="x-clear"></div>'].join("");

	    var w= ['<ul style="list-style:none"> ','<tpl  for=".">', 
	    '<div class="thumb-wrap" id="{name}" style="border: 1px solid white">', 
	    '<div class="thumb" ><li style="float:left;display:block;overflow:hidden;width:60px;height:60px;border:3px double #eee;margin: 0 2px 2px 0"><img src="http://www.google.cn/intl/zh-CN/images/logos/translate_logo.gif" title="{name}"></li></div>', 
	    '<span class="x-editable">{shortName}</span></div>', 
	    '</tpl>', '</ul> ' ,
	    '<div class="x-clear"></div>'].join(""); 
	        var r= ['<tpl  for=".">', 
	    '<div class="thumb-wrap" id="{name}" style="border: 1px solid white;float:left;">', 
	    '<div class="thumb" style="float:left" ><img style="width:100px;height:100px;border:5px double #eee;margin: 3px 2px 2px 3px" src="{imagepath}" title="{name}"></div>', 
	    '<span class="x-editable">{shortName}</span></div>', 
	    '</tpl>',
	    '<div class="x-clear"></div>'].join(""); 

	    return r;
		//     return '<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" title="{name}"><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" title="{name}">';
		    }-*/;  
}
